<template>
  <div class="content">
    <a-form style="padding: 20px 20px 0">
      <a-form-item label="楼宇名称">
        <a-space>
          <a-input placeholder="请输入楼宇名称" v-model:value="pages.name"></a-input>
          <a-button style="border-radius: 4px" type="primary" @click="search">查询</a-button>
        </a-space>
        <a-divider orientation="left" style="margin-left: -69px; margin-bottom: 0px" />
      </a-form-item>
    </a-form>
    <a-button
      type="primary"
      size="mini"
      style="margin-left: 20px; border-radius: 4px"
      @click="showDialog = true"
      >添加楼宇</a-button
    >
    <a-table :dataSource="list" :columns="columns" :pagination="false">
      <template #bodyCell="{ record, column, index, text }">
        <template v-if="column.dataIndex === 'number'">
          {{ (pages.page - 1) * pages.pageSize + index + 1 }}
        </template>
        <template v-if="column.dataIndex === 'status'">
          {{ text === '0' || !text ? '空置中' : '租赁中' }}
        </template>
        <a-space v-if="column.dataIndex === 'operate'">
          <a-button
            type="link"
            style=" padding: 4px 15px 4px 0"
            @click="edit(record.id)"
            >编辑</a-button
          >
          <a-button
            type="link"
            :disabled="record.status === 1"
            style="padding: 4px 15px 4px 0"
            @click="deleteBuildingAPI(record.id)"
            >删除</a-button
          >
        </a-space>
      </template>
    </a-table>
    <div class="pagination">
      <a-config-provider :locale="zh_CN">
        <a-pagination
          size="small"
          v-model:current="pages.page"
          v-model:page-size="pages.pageSize"
          :total="total"
          @change="onChange"
          :pageSizeOptions="['10', '20', '30', '40']"
          :show-total="(total) => `共 ${total} 条`"
          show-size-changer
          show-quick-jumper
        />
      </a-config-provider>
    </div>

    <add-build ref="RefForm" v-model:showDialog="showDialog" @addsuccess="getBuildingListAPI" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getBuildingList, deleteBuilding } from '@/api/building'
import { message, Modal } from 'ant-design-vue'
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import AddBuild from '@/views/park/components/add-build.vue'
const showDialog = ref(false)
let list = ref([]) //列表数据

const pages = ref({
  page: 1,
  pageSize: 5,
  name: ''
})
// const status = ref([])
const total = ref(null)
const columns = [
  {
    title: '序号',
    dataIndex: 'number',
    key: 'number',
    width: 126
  },
  {
    title: '楼宇名称',
    dataIndex: 'name',
    key: 'name',
    width: 186
  },
  {
    title: '层数',
    dataIndex: 'floors',
    key: 'floors',
    width: 168
  },
  {
    title: '在管面积(㎡)',
    dataIndex: 'area',
    key: 'area',
    width: 168
  },
  {
    title: '物业费(元/㎡)',
    dataIndex: 'propertyFeePrice',
    key: 'propertyFeePrice',
    width: 168
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 188
  },
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate',
    width: 189
  }
]
const onChange = (page, pageSize) => {
  pages.value.page = page
  pages.value.pageSize = pageSize
  getBuildingListAPI(pages.value)
}
const getBuildingListAPI = async (pages) => {
  const res = await getBuildingList(pages)
  list.value = res.data.rows
  // status.value = res.data.rows.status
  total.value = res.data.total
  //   console.log(total.value)
  //   console.log(res.data.rows)
}
// 删除楼宇----------
const deleteBuildingAPI = (id) => {
  Modal.confirm({
    content: '是否确认删除当前楼宇?',
    async onOk() {
      await deleteBuilding(id)
      message.success('操作成功')
      getBuildingListAPI()
    }
  })
}
// 搜索查询-----------
const search = () => {
  getBuildingListAPI(pages.value)
}
// 挂载---------
onMounted(() => {
  getBuildingListAPI()
})
const RefForm = ref(null)
const edit = (id) => {
  console.log(id)
  showDialog.value = true

  RefForm.value.getBuildingDetailAPI(id)
}
</script>

<style lang="scss" scoped>
.ant-layout-content {
  background-color: #f4f6f8;
}
.content {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  margin: 20px 20px 0;
}
.ant-input {
  width: 220px;
  border-radius: 4px;
}
.ant-table-cell {
  padding: 8px !important;
}
.ant-table-content {
  margin: 20px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-right: 50px;
}
</style>
